<template>

	<div class="box">
		<h5>优惠卷</h5>
		<div class="nav">
			<h4>优惠卷筛选</h4>
			<div class="screen-main">
				<span class="example-block">优惠类型</span>
				<div class="m-2" id="type">
					<el-cascader :options="options" :props="props1" clearable v-model="sech.sechOne" />
				</div>
				<span class="example-block-o">添加时间</span>
				<div class="parcel">
					<el-date-picker v-model="sech.sechTwo" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="getList" :disabledDate="disablesDate"
						style="height:38px; width: 600px;" />
				</div>
				<span class="example-block-o"></span>
				<input type="text" class="ipt" placeholder="请输入优惠卷名称或编码" v-model="sech.sechThree">
				<button class="screening" @click="SearchUsers()">筛选</button>
			</div>

		</div>
		<div class="nav_one">
			<h4>优惠卷列表</h4>
			<button @click="goto()" class="screening_one">添加优惠卷</button>
		</div>
		<div class="middle"></div>
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" class="top_title" typeof="index">
			<el-table-column width="55">
				<!-- type="selection" 单选框--><input type="checkbox" name="01" checked="checked" class="front">
			</el-table-column>
			<el-table-column label="编号" width="120">
				<template #default="scope">
					<span>{{scope.$index + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="名称" width="120">
				<template #default="scope">
					<span>{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="Scope" label="使用范围" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.use_scope }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="Threshold" label="使用门槛" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.prom_sill }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="Face" label="面值" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.face_value}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="Period" label="有效期" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.prom_day }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="状态" show-overflow-tooltip>
				<template #default="scope">
					<span>{{ scope.row.state_s }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="operation" label="操作" show-overflow-tooltip>
				<template #default="scope">
					<el-button size="small" class="but_view">查看</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)" class="but_Modify">修改
					</el-button>
					<!-- <el-button size="small" @click="gotos()" class="but_Modify">修改</el-button> -->
					<!-- <button size="small" type="danger" @click="DelUsers(index) promCoupon()">删除</button> -->
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
						class="but_delete">删除</el-button>
					<!-- <el-button @click="remove(scope.row.id)" title="删除" type="danger" size="mini" :disabled="scope.row.type == -1">删除</el-button> -->
				</template>
			</el-table-column>
			
		</el-table>
		
		<!-- 弹出层 -->
		<el-dialog v-model="dialogFormVisible" title="修改" id="Pop-up">
			<el-form>
				<el-form-item label="编号" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.prom_num" autocomplete="off" disabled />
				</el-form-item>
				<el-form-item label="名称" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.name" autocomplete="off" />
				</el-form-item>
				<el-form-item label="使用范围" :label-width="formLabelWidth">
					<el-input v-model="editObj.use_scope" autocomplete="off" />
				</el-form-item>
				<el-form-item label="使用门槛" :label-width="formLabelWidth">
					<el-input v-model="editObj.prom_sill" autocomplete="off" />
				</el-form-item>
				<el-form-item label="面值" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.face_value" autocomplete="off" />
				</el-form-item>
				<el-form-item label="有效期" :label-width="formLabelWidth" class="items">
					<el-input v-model="editObj.prom_day" autocomplete="off" />
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" class="item">
					<el-input v-model="editObj.state_s" autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="edit(edit_index, editObj)" class="but">确定</el-button>
					<el-button type="primary" @click="dialogFormVisible = false" class="but">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	import {
		Timer
	} from '@element-plus/icons-vue'
	import {
		promCoupon,
		delPromCoupon,
		editPromCoupon,
		sechPromCoupon
	} from '../api/api.js'
	export default {
		name: 'cao',
		setup() {
			const tableData = ref([])

			const dialogFormVisible = ref(false)
			const formLabelWidth = '140px'

			const props1 = {
				checkStrictly: true
			}

			const props2 = {
				multiple: true,
				checkStrictly: true,
			}
			const options = [{
					value: '语文',
					label: '语文'
				},
				{
					value: '数学',
					label: '数学'
				},
				{
					value: '英语',
					label: '英语'
				}
			]


			const sech = ref({
				sechOne: '',
				sechTwo: '',
				sechThree: ''
			})
			//修改的值
			const editObj = ref({})

			const edit_index = ref(0)
			return {
				tableData,
				dialogFormVisible,
				editObj,
				edit_index,
				props1,
				props2,
				options,
				sech
			}
		},
		disablesDate(time) {
			const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
			const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
			return time.getTime() <= _maxTime || time.getTime() > _minTime
		},
		mounted() {
			this.promCoupon();
		},
		methods: {
			promCoupon() {
				promCoupon().then(res => {
					console.log(res);
					let _data = res.data.list;
					this.tableData = _data;
					console.log(this.tableData[0]);
				}).catch(err => {
					console.log(err);
				})
			},
			goto() {
				this.$router.push('/use')
			},
			handleDelete(index, row) {
				this.$emit('del', row);
				delPromCoupon(row)
					.then(res => {
						console.log(res)
						this.promCoupon()
					})
					.catch(err => {
						console.log(err)
					})
			},
			handleEdit(index, row) {
				//console.log(index, row)
				/* 
					index: 索引值
					row: 当前的数据
				*/
				this.dialogFormVisible = true;
				this.editObj = row;
				this.edit_index = index;
			},
			edit(index, row) {
				// console.log(row);
				// // this.tableData[index] = row;
				// console.log(this.tableData[index].id);
				//发送请求
				editPromCoupon(row)
					.then(res => {
						console.log(res);
						//调用重新渲染
						alert(res.data.msg);
					})
					.catch(err => {
						console.log(err);
					})
				this.dialogFormVisible = false;
			},
			SearchUsers() {
				const sech_one = this.sech.sechOne
				const sech_two = this.sech.sechTwo
				const sech_three = this.sech.sechThree
				const each_data = {
					sech_one,
					sech_two,
					sech_three
				}
				console.log(sech_one)
				sechPromCoupon(each_data)
					.then(res => {
						console.log(res.data)
						this.tableData = res.data.list
					})
					.catch(err => {
						console.log(err)
					})
			},
		}
	}
</script>

<style scoped>
	.front {
		width: 15px;
		height: 15px;
	}
	.page_ye{
		margin-left: 13px;
	}
	.middle{
		width: 100%;
		height: 25px;
		background-color: white;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}
	.top_title>.footer {
		width: 100%;
		height: 100vh;
		margin: auto;
	}

	.box>.top_title {
		width: 100%;
		height: 100vh;
		margin: auto;
	}

	.select {
		margin-left: 20px;
		margin-right: 10px;
	}

	#travel {
		display: inline-block;
	}

	.footer_right>span {
		margin: 0 15px;
	}

	.pages {
		display: inline-block;
		margin-left: 10px;
		line-height: 20px;
		width: 90px;
		height: 20px;
	}

	.page {
		display: inline-block;
		margin-left: 10px;
		width: 40px;
		line-height: 20px;
		height: 20px;
		text-align: center;
		border: 1px solid;
	}

	.footer_left {
		width: 62%;
		height: 50px;
		line-height: 50px;
		float: left;
		background-color: white;
	}

	.footer_right {
		margin-top: -19px;
		line-height: 50px;
		background-color: white;
		width: 38%;
		height: 50px;
		float: right;
	}

	.el-input {
		width: 300px;
	}

	input[type=text]::placeholder {
		color: #a8abb2;
	}

	.example-block-o {
		margin-right: 10px;
	}

	.nav_one>h4 {
		display: inline-block;
	}

	.screening_one {
		float: right;
		margin: 13px 25px;
		width: 80px;
		height: 40px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		text-align: center;
		color: white;
	}

	.nav_one {
		width: calc(100% - 60px);
		margin-top: 10px;
		height: 65px;
		padding: 0 30px;
		background-color: white;
		color: black;
		margin-bottom: 5px;
		overflow: hidden;
	}

	.screening {
		float: right;
		width: 80px;
		height: 40px;
		margin: 0px 10px;
		background-color: #38a28a;
		border: none;
		border-radius: 5px;
		text-align: center;
		color: white;
	}

	.parcel {
		width: 300px;
		height: 40px;

	}

	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}

	.box {
		width: calc(100% - 60px);
		background-color: #f0f0f0;
		padding: 35px 30px;
	}

	.nav {
		width: calc(100% - 60px);
		margin-top: 30px;
		padding: 0 30px;
		background-color: white;
		color: black;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.nav>h4,
	.nav_one>h4 {
		margin: 20px 0;
	}

	.m-2 {
		width: 120px;
		margin: 0 40px 0 20px;
		display: inline-block;
	}

	.screen-main {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
	}

	.ipt {
		position: relative;
		margin-left: 380px;
		margin-right: 40px;
		width: 240px;
		padding: 5px 10px;
		height: 26px;
		border: 1px solid #dcdfe6;
		border-radius: 5px;
	}
</style>
<style>
	@import "../assets/el-input.css";
</style>
